<template>
  <div class="card content-box">
    <ECharts :option="option" />
  </div>
</template>

<script setup name="pieChart">
//统计地区
import ECharts from "@/components/ECharts/index.vue";
import { getAreaService } from "@/api/bigdata/index";
import { onMounted, ref } from "vue";
//数据类型
const dataList = ref([
  {
    address: "河南省-新乡市-延津县",
    petitionCount: 7
  }
]);

const getData = async () => {
  let result = await getAreaService();
  dataList.value = result.data;
};

onMounted(getData);

const option = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    left: "center",
    top: "bottom",
    data: dataList.value.map(item => item.address),
    textStyle: {
      color: "#a1a1a1"
    }
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: "Radius Mode",
      type: "pie",
      radius: [60, 280],
      center: ["50%", "50%"],
      roseType: "radius",
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: true
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: dataList.value.map(item => ({
        value: item.petitionCount,
        name: item.address
      }))
    }
  ]
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
